import React, { useState, useEffect, useCallback } from 'react';
import { Button, Modal, Table } from 'antd';
import { GetRoomUserMsg } from '../service';
import { ColumnsType } from 'antd/es/table';
import { useDispatch, useSelector } from 'react-redux';
import { decrement, setChangeRoomList } from '../counter/counterSlice';
interface Props {
    isModalOpen: boolean;
    setIsModalOpen: (event: boolean) => void;
    ModeMsg: any
    setIsChangeRooms: (event: number) => void;
}

// 套房换套房组件 
const IsSuiteRetrunCard: React.FC<Props> = React.memo(({ isModalOpen, setIsChangeRooms, setIsModalOpen, ModeMsg }) => {
    const dispatch = useDispatch()
    const flag = useSelector(state => state.counter.value)
    useEffect(() => {
        if (flag) {
            let card = localStorage.getItem("RecardNum")
            let list = dataSourceList.map((item) => {
                return card == item.cardNum ? { ...item, sendflag: "已换卡" } : item;
            })
            setdataSourceList(list)
            dispatch(decrement())
            let a = list.filter((item) => item.sendflag == "未换卡")
            if(!a.length){
                handleCancel()
            }
        }

    }, [flag])
    useEffect(() => {
        AA()
    }, [])
    const [dataSourceList, setdataSourceList] = useState([])
    // 查看套房发了多少张卡 
    const AA = useCallback(async () => {
        let { data } = await GetRoomUserMsg(ModeMsg.current.roomId)
        if (data.list) {
            let list = data.list.map((item) => {
                if (item.status == 1) {
                    return {
                        ...item, sendflag: "未换卡"
                    }
                }
            })
            setdataSourceList(list)

            dispatch(setChangeRoomList({ Now: list, Next: ModeMsg.target }))
            dispatch(decrement())
        } else {
            setdataSourceList([])   
            dispatch(setChangeRoomList([]))
        }

    }, [])
    //  


    const handleCancel = () => {
        setIsModalOpen(false);
        setIsChangeRooms(0)

    };
    const columns: ColumnsType<UserData> = [
        {
            key: "realName",
            title: '姓名',
            dataIndex: 'realName',
            filterMode: 'tree',
            filterSearch: true,
            width: 70
        },
        {
            key: "roomNo",
            title: '房号',
            render: (_, record: { subRoomNo: string; roomNo: string }) => (record.subRoomNo ? record.subRoomNo : record.roomNo),

        },
        {
            key: "mobile",
            title: '手机号',
            dataIndex: 'mobile',
            align: "center",
        },
        {
            key: "cardNum",
            title: '房卡',
            dataIndex: 'cardNum',
            align: "center",
        },
        {
            key: "issuingTime",
            title: '发卡时间',
            dataIndex: 'issuingTime',
            filterSearch: true,
            align: "center",
        },
        {
            key: "sendflag",
            title: '更换房卡',
            dataIndex: 'sendflag',
            filterSearch: true,
            align: "center",
        },


    ];
    return (
        <>
            <Modal title="更换套房" open={isModalOpen} onCancel={handleCancel} width={900} footer={null} >
                <br />
                <p style={{ color: "red" }}>请先将{ModeMsg.current.roomName}房卡放置发卡器上开始换房卡</p>
                <Table dataSource={dataSourceList} columns={columns} rowKey={(item) => item.id} pagination={false} />
                <br />
            </Modal>
        </>
    );
});

export default IsSuiteRetrunCard;